<ion-header no-border *ngIf="canGoBack">
  <ion-navbar hideBackButton transparent>
    <ion-buttons left>
      <button class="close-container disable-hover" (click)="closeCam()" ion-button>
        <ion-icon ios="md-close" md="md-close" color="light"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content *ngIf="!isCordova">
  <div class="not-supported">
    <span>
      Camera not supported
    </span>
  </div>
</ion-content>

<ion-content *ngIf="isCordova" class="back-transparent" no-bounce>
  <div class="page-scan-has-problems" *ngIf="(currentState == scannerStates.unauthorized || currentState == scannerStates.denied || currentState == scannerStates.unavailable)">
    <div class="header-container">
      <div>
        <div class="header" padding>
          <div class="image-container">
            <img src="assets/img/ico-receive.svg" />
          </div>
          <div class="title" padding translate>Scan QR Codes</div>
        </div>
        <div class="subtitle" translate>You can scan bitcoin addresses, payment requests, paper wallets, and more.</div>
      </div>
    </div>
    <div class="body">
      <div padding>
        <div *ngIf="currentState == scannerStates.unauthorized" translate>Enable the camera to get started.</div>
        <div *ngIf="currentState == scannerStates.denied" translate>Enable camera access in your device settings to get started.</div>
        <div *ngIf="currentState == scannerStates.unavailable" translate>Please connect a camera to get started.</div>
      </div>
      <div>
        <button ion-button outline class="button-standard" *ngIf="currentState == scannerStates.unauthorized" (click)="authorize()">
          {{'Allow camera access' | translate}}
        </button>
        <button ion-button outline class="button-standard" *ngIf="currentState == scannerStates.denied && canOpenSettings" (click)="openSettings()">
          {{'Open settings' | translate}}
        </button>
        <button ion-button outline class="button-standard" *ngIf="currentState == scannerStates.unavailable" (click)="attemptToReactivate()">
          {{'Retry camera' | translate}}
        </button>
      </div>
    </div>
  </div>
  <div class="page-scan-loading-camera" *ngIf="currentState == scannerStates.loading"></div>
  <div class="page-scan-camera-ready" *ngIf="currentState == scannerStates.visible">
    <div class="guides">
      <img class="svg qr-scan-guides" src="assets/img/bitpay-wallet-qr-scan-guides.svg">
    </div>
    <div class="scanner-controls">
      <span *ngIf="canEnableLight" class="icon-flash" [ngClass]="{'active': lightActive}" (click)="toggleLight()"></span>
      <span *ngIf="canChangeCamera" class="icon-camera-toggle" [ngClass]="{'active': cameraToggleActive}" (click)="toggleCamera()"></span>
    </div>
    <div class="scanner-controls" *ngIf="fromWalletConnect">
      <button ion-button clear class="url-btn" (click)="goToWalletConnectPage()">{{'Or paste URL' | translate}}</button>
    </div>
  </div>
</ion-content>